<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三创</title>
    <!-- 说明 -->
    <meta name="description" content="本网页只作为演示例程、无任何商业元素">
    <!-- 关键字 -->
    <meta name="keywords" content="网上应聘招聘">
    <!-- 网页图标 -->
    <link rel="shortcut icon" href="favicon.ico" />
    <!-- 初始化样式 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 公共样式 -->
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
    <style>
        .shell {
            float: left;
            width: 721px;
            height: 459px;
            /* background-color: black; */
            position: relative;
            /* overflow-x: hidden; */
            overflow-x: hidden;
        }

        .images {
            width: 300%;
            height: 100%;
            display: flex;
            position: absolute;
            left: 0;
            transition: .2s;
        }

        .img {
            width: 100%;
            background-size: cover;
        }

        /* .img:nth-child(1) {
            background-image: url(images/max1.jfif);
        }

        .img:nth-child(2) {
            background-image: url(images/max2.jpg);
        }

        .img:nth-child(3) {
            background-image: url(images/注册页/max3.jpg);
        } */

        .min-images {
            display: flex;
            justify-content: space-evenly;
            position: absolute;
            bottom: 20px;
            width: 40%;
            z-index: 999;
            right: 10%;
        }

        .min {
            width: 60px;
            height: 60px;
            cursor: pointer;
            border-radius: 50%;
            background-size: cover;
            border: solid 5px rgb(209, 30, 30);
            background-position: -20px 0;
        }

        .min:nth-child(1) {
            background-image: url(./images/注册页/max3.jpg);
        }

        .min:nth-child(2) {
            background-image: url(./images/max2.jpg);
        }
        .min:nth-child(3) {
            background-image: url(./images/max2.jpg);
        }

        .min:nth-child(4) {
            background-image: url(./images/001.png);
        }

        .button {
            width: 100%;
            height: 100%;
            position: absolute;
            display: flex;
            justify-content: space-between;
            user-select: none;
        }
        .button-left,
        .button-right {
            font-size: 50px;
            /* background-color: rgb(112, 95, 95); */
            padding: 0 0px;
            line-height: 450px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <!-- 顶部导航 -->
    <section class="shortcut">
        <div class="w">
            <div class="fl">
                <ul>
                    <li>
                        北斗星大学生未来规划欢迎您！&nbsp;
                    </li>
                    <li>
                        <a href="登陆界面.html">请登录&nbsp;</a>
                        <a href="注册页面.html" class="style_red">注册账号</a>
                    </li>
                </ul>
            </div>
            <div class="fr">
                <ul>
                    <li class="arrow-icon"><a href="mader.html">作者团队</a></li>
                    <li>&nbsp;|&nbsp;</li>
                    <li class="arrow-icon">我的意向</li>
                   
                </ul>
            </div>
        </div>

    </section>
    <!-- 顶部导航 -->
    <!-- 第二层 -->
    <section class="shortcut"></section>
    <header class="header w">
        <div class="logo" >
            <img src="./images/logo.png" alt="" width="280" height="90">
                <a href="index.html" title="未来规划首页" >
                    未来规划首页
                   
                </a>
        </div>
        
        <div class="search">
            <input type="search" name="" id="" placeholder="想要的职业">
            <a href="https://www.baidu.com/"><button>搜索</button></a>
        </div>
        <div class="hotwords">
            <a href="https://baike.baidu.com/item/%E7%A4%BE%E4%BC%9A%E4%B8%BB%E4%B9%89%E6%A0%B8%E5%BF%83%E4%BB%B7%E5%80%BC%E8%A7%82/3271832" class="style_red">&nbsp;自由平等</a>
            <a href="https://baike.baidu.com/item/%E7%A4%BE%E4%BC%9A%E4%B8%BB%E4%B9%89%E6%A0%B8%E5%BF%83%E4%BB%B7%E5%80%BC%E8%A7%82/3271832" class="style_red">&nbsp;</a>
            <a href="https://baike.baidu.com/item/%E7%A4%BE%E4%BC%9A%E4%B8%BB%E4%B9%89%E6%A0%B8%E5%BF%83%E4%BB%B7%E5%80%BC%E8%A7%82/3271832" class="style_red">&nbsp;公正法治</a>
            <a href="https://baike.baidu.com/item/%E7%A4%BE%E4%BC%9A%E4%B8%BB%E4%B9%89%E6%A0%B8%E5%BF%83%E4%BB%B7%E5%80%BC%E8%A7%82/3271832" class="style_red">&nbsp;</a>
            <a href="https://baike.baidu.com/item/%E7%A4%BE%E4%BC%9A%E4%B8%BB%E4%B9%89%E6%A0%B8%E5%BF%83%E4%BB%B7%E5%80%BC%E8%A7%82/3271832" class="style_red">&nbsp;爱国敬业</a>
            <a href="https://baike.baidu.com/item/%E7%A4%BE%E4%BC%9A%E4%B8%BB%E4%B9%89%E6%A0%B8%E5%BF%83%E4%BB%B7%E5%80%BC%E8%A7%82/3271832" class="style_red">&nbsp;</a>
            <a href="https://baike.baidu.com/item/%E7%A4%BE%E4%BC%9A%E4%B8%BB%E4%B9%89%E6%A0%B8%E5%BF%83%E4%BB%B7%E5%80%BC%E8%A7%82/3271832" class="style_red">&nbsp;诚信友善</a>
            <a href="https://baike.baidu.com/item/%E7%A4%BE%E4%BC%9A%E4%B8%BB%E4%B9%89%E6%A0%B8%E5%BF%83%E4%BB%B7%E5%80%BC%E8%A7%82/3271832" class="style_red">&nbsp;</a>
            <a href="https://baike.baidu.com/item/%E7%A4%BE%E4%BC%9A%E4%B8%BB%E4%B9%89%E6%A0%B8%E5%BF%83%E4%BB%B7%E5%80%BC%E8%A7%82/3271832" class="style_red">&nbsp;富强民主</a>
            <a href="https://baike.baidu.com/item/%E7%A4%BE%E4%BC%9A%E4%B8%BB%E4%B9%89%E6%A0%B8%E5%BF%83%E4%BB%B7%E5%80%BC%E8%A7%82/3271832" class="style_red">&nbsp;</a>
            <a href="https://baike.baidu.com/item/%E7%A4%BE%E4%BC%9A%E4%B8%BB%E4%B9%89%E6%A0%B8%E5%BF%83%E4%BB%B7%E5%80%BC%E8%A7%82/3271832" class="style_red">&nbsp;文明和谐</a>
        </div>
        <!-- <div class="want">
            选中的职业
            <i class="number">8</i>
        </div> -->
    </header>
    <!-- 第二层 -->
    <!-- 第三层 -->
    <nav class="nav">
        <div class="w">
            <div class="dropdown">
                <div class="dt">
                    全部
                </div>
                <div class="dd">
                    <ul>
                        <li><a href="https://baike.baidu.com/item/%E5%9B%BD%E5%AE%B6%E6%9C%BA%E6%9E%84/1779733">国家机关</a></li>
                        <li><a href="https://baike.baidu.com/item/%E5%85%9A%E7%BE%A4%E7%BB%84%E7%BB%87/22604465">党群组织</a></li>
                        <li><a href="https://baike.baidu.com/item/%E4%B8%93%E4%B8%9A%E6%8A%80%E6%9C%AF%E8%81%8C%E5%8A%A1/6597015">专业技术</a></li>
                        <li><a href="https://baike.baidu.com/item/%E5%8A%9E%E4%BA%8B/5490390">办事</a></li>
                        <li><a href="https://baike.baidu.com/item/%E6%9C%8D%E5%8A%A1%E4%B8%9A/2780385">服务业</a></li>
                        <li><a href="http://www.finerise-hk.com/hyfl/fl_a.htm">农、林、牧、渔、水利业</a></li>
                        <li><a href="https://www.baiketk.com/q_r5fe009c5ab27e.html">生产、运输设备操作</a></li>
                        <li><a href="https://baike.baidu.com/item/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%A1%AC%E4%BB%B6%E7%B3%BB%E7%BB%9F/8092895">计算机硬件</a></li>
                        <li><a href="https://baike.baidu.com/item/%E5%88%B6%E5%9B%BE%E5%91%98/2065115">制图员</a></li>
                        <li><a href="https://baike.baidu.com/item/%E6%9C%BA%E6%A2%B0%E8%AE%BE%E8%AE%A1/2050">机械设计</a></li>
                        <li><a href=https://zhidao.baidu.com/question/1611201540646391467.html404.html">算法研究</a></li>
                        <li><a href="https://developers.weixin.qq.com/community/develop/article/doc/000208bd85c6603d9a19d05435b813">小程序优化</a></li>
                        <li><a href="https://baike.baidu.com/item/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/10009024">前端开发</a></li>
                        <li><a href="https://baike.baidu.com/item/%E5%90%8E%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%B8%88/53137396">后端开发</a></li>
                        <li><a href="https://baike.baidu.com/item/%E6%95%99%E5%B8%88/75720">教师</a></li>
                    </ul>
                </div>
            </div>
            <div class="navitems">
                <ul>
                    <li><a href="index.html">本站首页</a></li>
                    <li><a href="https://xiaoyuan.zhaopin.com/">校园招聘</a></li>
                    <li><a href="https://job.chzu.edu.cn/syxx/list.htm">生源信息</a></li>
                    <li><a href="https://job.chzu.edu.cn/jyzc/list.htm">就业政策</a></li>
                    <li><a href="https://job.chzu.edu.cn/jyzd/list.htm">职业指导</a></li>
                    <li><a href="https://job.chzu.edu.cn/xzzx/list.htm">申请表下载</a></li>
                    <li><a href="https://www.psy525.cn/">心理咨询</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- 第三层 -->
    <div class="w">
        <div class="main">
            <div class="shell">
                <ul class="images">
                    <!-- <li>
                        <a href="#"><img src="./images/注册页/a30f470f06d17db9dfe6b47f1226402b.jpeg" width="721" height="459" alt=""></a>
                    </li> -->
                    <li class="img"><img src="./images/图片1.png" alt="" width="721" height="459"></li>
                    <li class="img"><img src="./images/注册页/max3.jpg" alt="" width="721" height="459"></li>
                    <li class="img"><img src="./images/001.png"alt="" width="721" height="459"></li>
                    <li class="img"><img src="./images/002.jpg" alt="" width="721" height="459"></li>

                    
                </ul>
              
                <div class="button">
                    <div class="button-left">
                        《</div>
                    <div class="button-right">》
                    </div>
                </div>
            </div>
            <div class="newsflash">
                <div class="new">
                    <div class="new-hd">
                        <h5>考研专栏</h5>
                        <a href="#" class="hd-more">456</a>
                    </div>
                    <div class="new-bd">
                        <ul>
                            <li><a href="https://yz.chsi.com.cn/"><strong>[官网] </strong> 中国研究生招生信息网</a></li>
                            <li><a href="https://yz.chsi.com.cn/zsml/queryAction.do"><strong>[专业]</strong>2022年硕士专业目录查询</a></li>
                            <li><a href="https://zkaoy.com/"><strong>[青研帮]</strong>考研小功能汇总</a></li>
                            <li><a href="https://kaoyan.eol.cn/"><strong>[教育网]</strong>中国教育在线中国教育网</a></li>
                            <li><a href="https://www.chsi.com.cn/"><strong>[学院]</strong>学籍学历信息查询与认证服务</a></li>
                        </ul>
                    </div>
                </div>
                <div class="life">
                    <ul>
                        <li><a href="http://www.scs.gov.cn/"><i><img src="./images/xiangsu_jiangbei.png" height="24" alt=""></i>
                                <p>考公官网</p>
                            </a>
                        </li>
                        <li>
                            <a href="http://bm.scs.gov.cn/pp/gkweb/core/web/ui/business/home/gkhome.html"><i><img src="./images/xiangsu_youxiji.png" height="24" alt=""></i>
                                <p>考公报名</p>
                            </a>
                        </li>
                        <li> <a href="https://www.chsi.com.cn/"><i><img src="./images/xiangsu_mao.png" height="24" alt=""></i>
                                <p>学信网</p>
                            </a> </li>
                        <li> <a href="https://bbs.qzzn.com/"><i><img src="./images/xiangsu_pijiu.png" height="24" alt=""></i>
                                <p>考公论坛</p>
                            </a> </li>
                        <li> <a href="https://gongwuyuan.eol.cn/guojia/"><i><img src="./images/xiangsu_jinbi.png" height="24" alt=""></i>
                                <p>考公频道</p>
                            </a> </li>
                        <li> <a href="http://edu.people.com.cn/GB/88733/164373/"><i><img src="./images/xiangsu_yaoshui.png" height="24" alt=""></i>
                                <p>公务员时评</p>
                            </a> </li>
                        <li> <a href="http://paper.people.com.cn/rmrb/html/2021-11/03/nbs.D110000renmrb_01.htm"><i><img src="./images/xiangsu_xianrenzhang.png" height="24" alt=""></i>
                                <p>人民日报</p>
                            </a> </li>
                        <li> <a href="http://www.banyuetan.org/"><i><img src="./images/xiangsu_xiaoya.png" height="24" alt=""></i>
                                <p>中央宣传</p>
                            </a> </li>
                        <li> <a href="http://t.zoukankan.com/fzz9-p-8548811.html"><i><img src="./images/xiangsu_tuzi.png" height="24" alt=""></i>
                                <p>考公笔记一</p>
                            </a> </li>
                        <li> <a href="http://t.zoukankan.com/fzz9-p-8548811.html"><i><img src="./images/xiangsu_tangguo.png" height="24" alt=""></i>
                                <p>考公笔记二</p>
                            </a> </li>
                        <li> <a href="http://t.zoukankan.com/fzz9-p-8548811.html"><i><img src="./images/xiangsu_wuqi.png" height="24" alt=""></i>
                                <p>考公笔记三</p>
                            </a> </li>
                        <li> <a href="http://t.zoukankan.com/fzz9-p-8548811.html"><i><img src="./images/xiangsu_tuzi.png" height="24" alt=""></i>
                                <p>考公笔记四</p>
                            </a> </li>
                    </ul>
                </div>
                <div class="barne"><a href="#"><img src="./images/min.png" alt="" height="80" width="254"></a></div>
            </div>
        </div>
    </div>
    <!-- 底层 -->
    <footer class="footer">
        <div class="w">
            <div class="mod">
                <ul>
                    <li>
                        <h5>
                            <img src="./images/xiangsu_aixin.png" height="50" alt="">
                        </h5>
                        <div class="stxt">
                            <h4><a href="https://www.apesk.com/nt/new11/?hr_email=13900000000&hrmbti=INTJ&hrsex=male&qzhr=yes">人才画像</a></h4>
                            <p>一心一意</p>
                        </div>
                    </li>
                    <li>
                        <h5>
                            <img src="./images/xiangsu_caomei.png" height="50" alt="">
                        </h5>
                        <div class="stxt">
                            <h4><a href="https://yz.chsi.com.cn/">考研咨询</a></h4>
                            <p>马到成功</p>
                        </div>
                    </li>
                    <li>
                        <h5>
                            <img src="./images/xiangsu_meiguihua.png" height="50" alt="">
                        </h5>
                        <div class="stxt">
                           <h4><a href="https://www.chinagwy.org/">考公咨询</a></h4>
                            <p>心想事成</p>
                        </div>
                    </li>
                    <li>
                        <h5>
                            <img src="./images/xiangsu_qizhi.png" height="50" alt="">
                        </h5>
                        <div class="stxt"><h4><a href="https://www.zhaopin.com/">就业咨询</a></h4>
                            <p>星辰大海</p>
                            
                        </div>
                    </li>

                </ul>
            </div>
            <div class="mod1">
                <dl>
                    <dt>核心城市</dt>
                    <dd><a href="https://baike.baidu.com/item/%E5%8C%97%E4%BA%AC/128981">北京</a></dd>
                    <dd><a href="https://baike.baidu.com/item/%E4%B8%8A%E6%B5%B7/114606">上海</a></dd>
                    <dd><a href="https://baike.baidu.com/item/%E5%B9%BF%E4%B8%9C/207811">广东</a></dd>
                    <dd><a href="https://baike.baidu.com/item/%E6%B7%B1%E5%9C%B3/140588">深圳</a></dd>
                    <dd><a href="https://baike.baidu.com/item/%E6%9D%AD%E5%B7%9E/147639">杭州</a></dd>
                    

                </dl>
                <dl>
                    <dt>发达城市</dt>
                    <dd><a href="https://baike.baidu.com/item/%E6%88%90%E9%83%BD/128473">成都</a></dd>
                    <dd><a href="https://baike.baidu.com/item/%E8%8B%8F%E5%B7%9E/122945">苏州</a></dd>
                    <dd><a href="https://baike.baidu.com/item/%E5%A4%A9%E6%B4%A5/132308">天津</a></dd>
                    <dd><a href="https://baike.baidu.com/item/%E6%AD%A6%E6%B1%89/106764">武汉</a></dd>
                    <dd><a href="https://baike.baidu.com/item/%E9%87%8D%E5%BA%86/23586">重庆</a></dd>
                  

                </dl>
                <dl>
                    <dt>较发达城市</dt>
                    <dd><a href="https://baike.baidu.com/item/%E5%8D%97%E4%BA%AC/23952">南京</a></dd>
                    <dd><a href="https://baike.baidu.com/item/%E9%95%BF%E6%B2%99/204237">长沙</a></dd>
                    <dd><a href="https://baike.baidu.com/item/%E9%83%91%E5%B7%9E/123948">郑州</a></dd>
                    <dd><a href="https://baike.baidu.com/item/%E8%A5%BF%E5%AE%89/121614">西安</a></dd>
                    <dd><a href="https://baike.baidu.com/item/%E5%A4%A7%E8%BF%9E/152852">大连</a></dd>

                </dl>
                <dl>
                    <dt>中等城市</dt>
                    <dd><a href="https://baike.baidu.com/item/%E6%97%A0%E9%94%A1/135983">无锡</a></dd>
                    <dd><a href="https://baike.baidu.com/item/%E9%9D%92%E5%B2%9B/60244">青岛</a></dd>
                    <dd><a href="https://baike.baidu.com/item/%E6%B5%8E%E5%8D%97/135066">济南</a></dd>
                    <dd><a href="https://baike.baidu.com/item/%E6%B2%88%E9%98%B3/13034">沈阳</a></dd>
                    <dd><a href="https://baike.baidu.com/item/%E5%AE%81%E6%B3%A2/209476">宁波</a></dd>

                </dl>
                <dl>
                    <dt>较中等城市</dt>
                    <dd><a href="https://baike.baidu.com/item/%E4%BD%9B%E5%B1%B1/200343">佛山</a></dd>
                    <dd><a href="https://baike.baidu.com/item/%E5%8D%97%E9%80%9A/106072">南通</a></dd>
                    <dd><a href="https://baike.baidu.com/item/%E9%95%BF%E6%98%A5/121865">长春</a></dd>
                    <dd><a href="https://baike.baidu.com/item/%E7%83%9F%E5%8F%B0/207299">烟台</a></dd>
                    <dd><a href="https://baike.baidu.com/item/%E5%93%88%E5%B0%94%E6%BB%A8%E7%89%B9%E5%88%AB%E5%B8%82/4231810">哈尔滨</a></dd>

                </dl>
                <dl>
                    <dt>北斗星公众号</dt>
                    <dd><img src="./images/注册页/二维码-1.png" width="94" alt=""></dd>
                    -----

                </dl>
            </div>
            <div class="loyer">
                <div class="link">
                    © 2021-2021 404.com 版权所有 关于未来规划 联系我们 知识产权 著作权与商标声明 法律声明 服务条款 隐私政策 网站导航
                </div>
                <div class="copyright">
                    本产品主要服务于大学高年级学生，这一类同学需要开始考虑未来规划，但专业技能还尚未齐全，对于未来较为迷茫。本产品可有效为用户速写人才画像，
                    <p></p>分析人物的综合特征，从而推荐相匹配的未来规划供用户参考，同时可针对相应规划推荐相关产业链。<br>
                    客户的特征进行分析，从而制定相应的营销策略，为客户提供个性化的需求。
                </div>

            </div>
        </div>
    </footer>
    <!-- 底层 -->
    <input type="text" class="dial" value="75" data-displayPrevious=true data-fgColor="#00A8A9" data-thickness=.3
        value="29">
</body>
<script>
    let left = document.querySelector('.button-left');
    let right = document.querySelector('.button-right');
    let min = document.querySelector('.min');
    let images = document.querySelector('.images');

    let index = 0;
    let time

    function position() {
        images.style.left = (index * -100) + "%"
    }

    function add() {
        if (index >= 3) {
            index = 0 
        } else {
            index++
        }
    }

    function desc() {
        if (index < 1) {
            index = 2
        } else {
            index--
        }
    }

    function timer() {
        time = setInterval(() => {
            index++
            desc()
            add()
            position()
        }, 3000);
    }
    left.addEventListener('click', () => {
        desc()
        position()
        clearInterval(time)
        timer()
    })
    right.addEventListener('click', () => {
        add()
        position()
        clearInterval(time)
        timer()
    })
    timer()
</script>

</html>